<template>
  <!-- 目录结构 -->
  <div style="width:100%">
    <div class="contenbox">
      <span>目录</span>
    </div>
    <form style="width:100%">
      <div style="width:100%" class="tree">
        <div
          v-for="(item, index) in catalog"
          :key="index"
          class="pointer tree-main"
        >
          <!-- 一级目录 -->
          <div
            class="tree-one"
            :class="{ 'blue-backgound': item.item_id == userCatalogID }"
            @click="storageCount(item,index,1)"
            @mouseenter="enter(item)"
            @mouseleave="leave(item.item_id)"
          >
            <div class="tree-one-main">
              <i
                :ref="'i' + item.item_id"
                :class="{ 'is-icon': !item.items.length > 0,'el-icon-caret-bottom':!item.invalid_parameter2,'el-icon-caret-right':item.invalid_parameter2,'btn-color':item.item_id == userCatalogID }"
                style="color: #bfbfbf; font-size: 16px; width: 20px"
              />
              <svg-icon
                icon-class="folder"
                :class="{'btn-color':item.item_id == userCatalogID}"
                style="color: #bfbfbf; font-size: 16px; width: 20px"
              />
              <el-button
                v-if="!item.invalid_parameter1"
                style="font-size:16px;"
                type="text"
                class="tree-btn"
                :class="{'btn-color':item.item_id == userCatalogID}"
                @dblclick.native="storageDetail(item)"
              >{{ item.item_name }}</el-button>
              <el-input
                v-else
                v-model="item.item_name"
                v-select="true"
                class="input-border"
                size="mini"
                maxlength="9"
                @change="newscomfirmRename(item)"
                @blur="newscomfirmRename(item)"
                @keyup.enter.native="newscomfirmRename(item)"
              />
            </div>
            <!-- prohibit-do有输入  禁止其他悬浮 -->
            <el-dropdown :ref="'more' + item.item_id" :class="{'prohibit-do':prohibitDo}" style="display: none">
              <span class="el-dropdown-link">
                <i class="el-icon-more" style="margin-right:5px" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="$emit('addCatalogue',index)"
                >新增同级目录</el-dropdown-item>
                <!-- v-if判断has_child为TRUE有数据或有子目录，&&判断变量管理当前是否有数据 -->
                <el-dropdown-item
                  v-if="(item.items.length==0?item.has_child?false:true:true) &&(userCatalogID===item.item_id?directoryList.length ===0?true:false:true)"
                  @click.native="addChildCatalogue(index, item)"
                >新增子目录</el-dropdown-item>
                <el-dropdown-item
                  :disabled="item.has_child"
                  @click.native="delectChildCatalogue(index, item)"
                >删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 二级目录 -->
          <el-collapse-transition>
            <div
              v-show="!item.invalid_parameter2"
              :ref="'fold' + item.item_id"
              :class="{
                bnbn:
                  item.items.length > 0 &&
                  getEditStatus(item.items, item.item_id),
              }"
              class="sub pointer"
            >
              <div
                v-for="(item2, index2) in item.items"
                :key="index2 + 100"
                :class="{ 'blue-backgound': item2.item_id == userCatalogID }"
                class="inputDeep tree-two"
                @click="storageCount(item2,index,2,index2)"
                @mouseover="addActive(index, index2)"
                @mouseout="removeActive(index, index2)"
              >
                <el-button
                  v-if="!item2.invalid_parameter1"
                  style="font-size:16px;"
                  class="sub-btn tools"
                  :class="{'btn-color':item2.item_id == userCatalogID}"
                  type="text"
                  @dblclick.native="storageDetail(item2)"
                >
                  <span style="display: flex; align-items: center">
                    <svg-icon
                      icon-class="folder1"
                      style="font-size: 16px; width: 20px"
                    />
                    <span style="margin-left: 2px"> {{ item2.item_name }} </span>
                  </span>
                </el-button>
                <el-input
                  v-else
                  v-model="item2.item_name"
                  v-select="true"
                  class="input-border"
                  size="mini"
                  maxlength="9"
                  @change="newscomfirmRename(item2)"
                  @blur="newscomfirmRename(item2)"
                  @keyup.enter.native="newscomfirmRename(item2)"
                />
                <el-dropdown class="tree-two-none" :class="{'tree-two-dropdown':!prohibitDo}">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more" style="margin-right:5px" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-if="item.items.length==0?item.has_child?false:true:true"
                      @click.native="addChildCatalogue(index, item)"
                    >新增同级目录</el-dropdown-item>

                    <el-dropdown-item
                      @click.native="removeUsualVariable(item2)"
                    >删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              <!-- <el-input v-else value="Plague Ratss" placeholder="" size="normal" clearable /> -->
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    <!-- <input type="reset" value="Collapse All"> -->
    </form>
  </div>
</template>

<script>
// import { parse } from 'path-to-regexp'
export default {
  // 自定义指令
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    },
    select: { // 默认选中
      inserted: function(el, binding) {
        el.querySelector('input').select()
        // 因为el-input在input标签外面还包了其他标签，所以要通过querySelector选中input框
      }
    }
  },
  props: {
    catalog: { type: Array, default: null }, // 这里就是需要渲染内容
    directoryList: { type: Array, default: () => [] }
  },

  data() {
    return {
      text: require('@/assets/images/png/text.png'),
      is_show: false,
      tree_right: require('@/assets/images/png/tree_right.png'),
      tree_down: require('@/assets/images/png/tree_down.png'),
      xxx: '',
      child_index: 0, // 新增子目录个数
      changeInputVal: true, // 判断change和input是否触发
      num: 0
    }
  },
  computed: {
    // 禁止悬浮框
    prohibitDo() {
      const catalog = this.catalog
      let prohibit_do = false
      for (let index = 0; index < catalog.length; index++) {
        const item = catalog[index]
        if (item.invalid_parameter1) {
          prohibit_do = item.invalid_parameter1
          break
        }
        for (let index2 = 0; index2 < item.items.length; index2++) {
          const item2 = catalog[index].items[index2]
          console.log('item2.invalid_parameter1', item2.invalid_parameter1)
          if (item2.invalid_parameter1) {
            prohibit_do = true
            break
          }
        }
      }
      console.log('结果。。。', prohibit_do)
      return prohibit_do
    },
    userCatalogID() {
      return this.$store.state.management.managementitem_id
    },
    getEditStatus() {
      return (items, item_id) => {
        items.forEach((item) => {
          if (item.invalid_parameter1) {
            this.$refs[`fold${item_id}`][0].style.display = 'block'
          }
        })
      }
    }
  },
  watch: {
    directoryList: {
      handler(val) {
        console.log('目录数据val', val)
      }
    }
  },
  methods: {
    // 添加子目录
    addChildCatalogue(index, item) {
      this.child_index = this.child_index + 1
      const data = {
        create_time: 1631150119,
        invalid_parameter1: true,
        item_id: 0,
        item_key: 'past&6139602704d87',
        item_name: '新增子目录' + this.child_index,
        parent_id: 0,
        path_key: 'family_history&613960270485b|past&6139602704d87',
        relation_id: 0,
        status: 1,
        template_id: 51,
        weight: 6
      }
      this.$emit('addChildCatalogue', index, data)
      // this.storageCount(item)
      console.log('two')
    },
    // 删除目录
    delectChildCatalogue(index, item) {
      // alert('还没做')
      // 用户点击删除子目录需要知道目录下是否有数据
      console.log('index', index, item)
      if (item.items.length >= 1) {
        this.$message.error('目录下有数据禁止删除')
        return
      }
      // 如果没有就传递给父组件看数据是否有数据
      this.$emit('detailCatalogue', item)
    },
    // 删除
    removeUsualVariable(e) {
      console.log('eeee', e)
      // 告诉父元素需要删除数据的id
      this.$emit('removeUsualVariable', e.item_id)
    },
    handleNodeClick(e) {
      console.log('我被触发拉！！！', e)
    },
    // 鼠标移入显示操作符//爆红是eslint不支持，语法正确
    enter(item) {
      this.catalog.forEach((item2) => {
        const ref_name = `more${item2.item_id}`
        if (item.item_id === item2.item_id) {
          this.$refs[ref_name][0].$el.style.display = 'block'
        } else {
          this.$refs[ref_name][0].$el.style.display = 'none'
        }
      })
    },
    // 鼠标移出隐藏操作符
    leave(item_id) {
      const ref_name = `more${item_id}`
      this.$refs[ref_name][0].$el.style.display = 'none'
    },
    // 鼠标移入
    addActive(index, index2) {
    },
    // 鼠标移出
    removeActive(index, index2) {
    },
    // 单击
    storageCount(item, index, id, index2) {
      // 目录有输入框不能收缩
      if (this.prohibitDo) {
        return
      }
      if (item.items) {
        if (this.xxx === item.item_id) {
          this.xxx = ''
        } else {
          this.xxx = item.item_id
        }
      }

      console.log('单击了', this.xxx)
      clearTimeout(this.time) // 首先清除计时器
      this.time = null
      this.time = setTimeout(() => {
        // 控制目录展开 选中二级目录
        if (id === 1) {
          this.catalog[index].invalid_parameter2 = !item.invalid_parameter2
        } else {
          // this.catalog[index].items[index2].invalid_parameter2 = !this.catalog[index].items[index2].invalid_parameter2
          // this.catalog.forEach((catalog_item, catalog_index) => {
          //   catalog_item.items.forEach((items_item, items_index) => {
          //     if (catalog_index === index && items_index === index2) {
          //       console.log(items_index)
          //     } else {
          //       items_item.invalid_parameter2 = true
          //     }
          //   })
          // })
        }

        // 控制目录展开
        // this.catalog.forEach((item2) => {
        //   if (item.item_id === item2.item_id) {
        //     const style_display =
        //       this.$refs[`fold${item2.item_id}`][0].style.display
        //     // 判断是否有二级目录
        //     if (item2.items.length < 1) return
        //     if (style_display === 'none') {
        //       this.$refs[`fold${item2.item_id}`][0].style.display = 'block'
        //       this.$refs[`i${item2.item_id}`][0].setAttribute(
        //         'class',
        //         'el-icon-caret-bottom'
        //       )
        //     } else {
        //       this.$refs[`fold${item2.item_id}`][0].style.display = 'none'
        //       this.$refs[`i${item2.item_id}`][0].setAttribute(
        //         'class',
        //         'el-icon-caret-right'
        //       )
        //     }
        //   }
        // })

        // ==============
        if (item.items) {
          // 如果进来这里说明 下面有数据
          if (item.items.length >= 1) {
            console.log('如果进来这里说明 下面有数据')
            // 结束
            return
          }
        }
        // 如果不是就告诉父元素发请求
        this.$emit('newsGetTemplateQuestionList', item.item_id)
        console.log('this.userCatalogID', this.userCatalogID)
      }, 300) // 大概时间300ms
    },
    // 双击
    storageDetail(item) {
      // 清除单击事件
      clearTimeout(this.time)
      this.time = null
      item.invalid_parameter1 = true
      console.log('=================', item)
      // this.storageCount(item)
    },
    newscomfirmRename(e) {
      console.log('被触发拉！！！', this.num)
      e.invalid_parameter1 = false
      if (this.num === 0) {
        console.log('eeeeeeee')
        this.num = 1
        this.comfirmRename(e)
      }
    },

    // 改目录名称
    comfirmRename(item) {
      item.invalid_parameter1 = false
      // 取消操作
      // this.data_tree[index].items[index2].edit_status = false
      console.log('this.catalog', this.catalog)
      const data = [] // 一级目录
      const twoData = [] // 二级目录
      // 新增
      if (item.item_id === 0) {
        this.catalog.forEach((catalog) => {
          if (catalog.item_id === item.item_id) {
            data[0] = {}
            // 如果进来说明修改的是一级目录
            console.log('如果进来说明修改的是一级目录', catalog)
            if (catalog.items.length >= 1) {
              data[0] = {
                item_name: catalog.item_name,
                item_id: catalog.item_id,
                relation_id: catalog.relation_id,
                show_status: catalog.status,
                dir_data: ''
              }
            } else {
              data[0] = {
                item_name: catalog.item_name,
                item_id: catalog.item_id,
                relation_id: catalog.relation_id,
                show_status: catalog.status,
                dir_data: '',
                item_data: ''
              }
            }
          } else {
            catalog.items.forEach((items) => {
              if (items.item_id === item.item_id) {
              // 进来这里就是用户需要删除的二级目录
                console.log('进来这里就是用户需要修改的二级目录', items)
                // 需要把数据存到vuex中
                twoData[0] = {}
                data[0] = {}
                twoData[0] = {
                  item_name: items.item_name,
                  item_id: items.item_id,
                  relation_id: items.relation_id,
                  show_status: items.status,
                  item_data: ''
                }
                // 拼接一级
                data[0] = {
                  item_name: catalog.item_name,
                  item_id: catalog.item_id,
                  relation_id: catalog.relation_id,
                  show_status: catalog.status,
                  dir_data: twoData
                }
              }
            })
          }
        })
      } else {
      // 编辑
        this.catalog.forEach((catalog) => {
          if (catalog.item_id === item.item_id) {
            if (catalog.items.length >= 1) {
              // 拼接一级
              data[0] = {
                item_name: catalog.item_name,
                item_id: catalog.item_id,
                relation_id: catalog.relation_id,
                show_status: catalog.status,
                is_up_weight: false,
                dir_data: '',
                item_data: ''
              }
            } else {
              // 拼接一级
              data[0] = {
                item_name: catalog.item_name,
                item_id: catalog.item_id,
                relation_id: catalog.relation_id,
                show_status: catalog.status,
                is_up_weight: false,
                dir_data: '',
                item_data: ''
              }
            }
          } else {
            catalog.items.forEach((items) => {
              if (items.item_id === item.item_id) {
                data[0] = {
                  item_name: catalog.item_name,
                  item_id: catalog.item_id,
                  relation_id: catalog.relation_id,
                  show_status: catalog.status,
                  is_up_weight: false,
                  dir_data: [
                    {
                      item_name: items.item_name,
                      item_id: items.item_id,
                      relation_id: items.relation_id,
                      show_status: items.status,
                      is_up_weight: false,
                      item_data: ''
                    }
                  ]
                }
              }
            })
          }
        })
      }

      console.log('拼接完成的数据', data, this.$store.state.management)
      // 数据传给父元素
      this.$emit('recomposeCatalogue', data)
      this.$forceUpdate()
      const z = setTimeout(() => {
        this.num = 0
        clearTimeout(z)
      }, 1000)

      this.changeInputVal = true
    }
  }
}
</script>
<style lang="scss" scoped>
.prohibit-do{
  display: none !important;
}
// 目录标题
.contenbox {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding-top: 30px;
    border-top: 20px solid #f7f7f7;
    margin-bottom: 20px;
    span{
      font-size: 20px;
      margin-left: 20px;
    }
}
.tree-one:hover {
  background: #f0f7ff;
}
.tree-two:hover {
      background: #f0f7ff;
      .tree-two-dropdown{
        display: block;
      }
    }
.tree-two-none{
  display: none;
}
.is-icon {
  opacity: 0;
}
.blue-backgound {
  background: rgba(22, 132, 252, 0.16) !important;
}
.sub .blue-backgound {
  background: rgba(22, 132, 252, 0.16);
}
.tree-one-main .btn-color{
  color: #3593f8 !important;
}
.sub .btn-color{
  color: #3593f8;
}
.tree-btn {
  color: #333;
}
.tools {
  color: #333;
}
.sub-btn {
  padding: 0 !important;
  height: 30px;
  display: flex;
  align-items: center;
}
.input-border {
  border: none;
}
form {
  position: relative;
  width: 210px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
}

h1 {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #adadae;
  color: #5c5d5e;
  font-size: 1.1em;
}

.tree {
  .tree-main {
    width: 100%;
    font-size: 16px;
    .tree-one {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tree-one-main {
        display: flex;
        align-items: center;
      }
    }

  }
}
.inputDeep {
  height: 38px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tree::after {
  content: "";
  display: block;
  clear: left;
}

.tree div {
  clear: left;
}

input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

input:checked + label::before {
  content: "\f07c";
}

a::before {
  content: "\f068";
}

input:focus + label,
a:focus {
  outline: none;
  background-color: #b9c3c9;
}
.sub {
  float: left;
  width: 100%;
}

input:checked ~ .sub {
  display: block;
}

input[type="reset"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  color: #e8ebed;
  background-color: #6b7c87;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="reset"]:focus {
  outline: none;
  box-shadow: 0 0 0 4px #b9c3c9;
}
.newTransparency {
  opacity: 0;
}
</style>
